<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客服列表</title>

    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css">
    {load href="__libs__/jquery/jquery.min.js"/}
    {load href="__libs__/layer/layer.js"/}
    <style>
        .layim-msgbox {
            margin: 15px;
        }

        .layim-msgbox li {
            position: relative;
            margin-bottom: 10px;
            padding: 0 130px 10px 60px;
            padding-bottom: 10px;
            line-height: 22px;
            border-bottom: 1px dotted #e2e2e2;
        }

        .layim-msgbox .layim-msgbox-tips {
            margin: 0;
            padding: 10px 0;
            border: none;
            text-align: center;
            color: #999;
        }

        .layim-msgbox .layim-msgbox-system {
            padding: 0 10px 10px 10px;
        }

        .layim-msgbox li p span {
            padding-left: 5px;
            color: #999;
        }

        .layim-msgbox li p em {
            font-style: normal;
            color: #FF5722;
        }

        .layim-msgbox-avatar {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
        }

        .layim-msgbox-user {
            padding-top: 5px;
        }

        .layim-msgbox-content {
            margin-top: 3px;
        }

        .layim-msgbox .layui-btn-small {
            padding: 0 15px;
            margin-left: 5px;
        }

        .layim-msgbox-btn {
            position: absolute;
            right: 0;
            top: 12px;
            color: #999;
        }

        .icon_gray {
            -webkit-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
    </style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view">

    {if $service}
     
       {foreach $service as $se}
      
         <li style="height: 50px;">

            {if $se.state == 'offline'}
            <a>
                <img src="{$se.avatar}" class="layui-circle layim-msgbox-avatar icon_gray">
            </a>
             <p class="layim-msgbox-user">
                <a>{$se.nick_name}</a>
            </p>
            <p class="layim-msgbox-btn">  
                <button class="layui-btn layui-btn-small layui-btn-disabled">转接</button>
            </p>
            {else}
            <a>
                <img src="{$se.avatar}" class="layui-circle layim-msgbox-avatar">
            </a>
             <p class="layim-msgbox-user">
                <a>{$se.nick_name}</a>
            </p>
            <p class="layim-msgbox-btn">  
                <button class="layui-btn layui-btn-small" id='se{$se.service_id}' onclick='changese({$se.service_id})'>转接</button>
            </p>
            {/if}
           
        </li>
       {/foreach}
    
    {else}
       <div class="layui-flow-more">
            <li class="layim-msgbox-tips">暂无其他客服</li>
        </div>

    {/if}

</ul>

<script src="/assets/libs/layui/layui.js"></script>
<script>
  
  var changese = function(id){

     var initdata={
        id:id,
        visiter_id:'{$visiter_id}',
        name:'{$name}'
     };

     $.ajax({
        url:'/admin/set/getswitch',
        type:'post',
        data:initdata,
        dataType:'json',
        success:function(res){
            if(res.code == 0){
                layer.msg('转接成功',{end:function(){
                    $("#se"+id).addClass('layui-btn-disabled');
                    parent.getchat();
                 }});

            }
        }
     });

     
  }

</script>
</body>
</html>
